<div class="pt-lg">
  <nz-card>
    <div nz-row>
      <div nz-col [nzXs]="24" [nzSm]="6" class="header-info">
        <span class="text-grey-dark">净资产</span>
        <span class="d-block display-2">{{ overview?.net_asset }}</span>
        <em></em>
      </div>
      <div nz-col [nzXs]="24" [nzSm]="6" class="header-info">
        <span class="text-grey-dark">负债</span>
        <span class="d-block display-2">{{ overview?.liabilities }}</span>
        <em></em>
      </div>
      <div nz-col [nzXs]="24" [nzSm]="6" class="header-info">
        <span class="text-grey-dark">总资产</span>
        <span class="d-block display-2">{{ overview?.total_assets }}</span>
      </div>
      <div nz-col [nzXs]="24" [nzSm]="6" class="header-info">
        <span class="text-grey-dark">账户数</span>
        <span class="d-block display-2">{{ overview?.count }}</span>
      </div>
    </div>
  </nz-card>
</div>

<nz-card>
  <form nz-form #f="ngForm" se-container size="compact" (ngSubmit)="search()" gutter="24" [labelWidth]="null">
    <se col="6">
      <input nz-input [(ngModel)]="q.name" name="name" placeholder="搜索账户名称" />
    </se>
    <se col="6">
      <nz-select [(ngModel)]="q.type" name="type" [nzPlaceHolder]="'全部类型'" nzShowSearch nzAllowClear>
        <nz-option nzCustomContent [nzLabel]="i.name" [nzValue]="i.type" *ngFor="let i of accountTypes">
          <i nz-icon nzIconfont="icon-{{ i.type }}"></i> {{ i.name }}
        </nz-option>
      </nz-select>
    </se>
    <se col="6">
      <nz-select [(ngModel)]="q.sort" name="sort" [nzPlaceHolder]="'默认排序'" nzShowSearch nzAllowClear>
        <nz-option *ngFor="let i of accountSorts" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
      </nz-select>
    </se>

    <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
    <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
  </form>
  <button nz-button (click)="form()" [nzType]="'primary'">
    <i nz-icon nzType="plus"></i>
    <span>新建</span>
  </button>
</nz-card>

<nz-list [nzDataSource]="list" [nzLoading]="loading" [nzRenderItem]="item" [nzGrid]="{ gutter: 24, lg: 8, md: 12, sm: 24, xs: 24 }">
  <ng-template #item let-item>
    <g2-card [title]="title" [bordered]="true" [total]="item.balance | _currency" [footer]="footer" [avatar]="avatar" [action]="action">
      <ng-template #title>
        <p (click)="form(item)">{{ item.name }}</p>
      </ng-template>
      <ng-template #avatar>
        <i nz-icon nzIconfont="icon-{{ item.type }}" class="icon-md" (click)="form(item)"></i>
      </ng-template>
      <ng-template #action>
        <span class="pl-sm">
          <i nz-icon nzType="edit" (click)="form(item)"></i>
        </span>
        <span class="pl-sm">
          <i
            nz-icon
            nzType="delete"
            nz-popconfirm
            nzPopconfirmTitle="确定要删除帐户吗？如果帐户被删除，所有涉及的交易、规则和定时配置将永远失去。"
            nzPopconfirmPlacement="bottom"
            (nzOnConfirm)="delete(item)"
          ></i>
        </span>
      </ng-template>
      <ng-template #footer>
        <nz-tag>{{ item.type_name }}</nz-tag>
        <nz-tag *ngIf="item.default">默认账户</nz-tag>
        <nz-tag *ngIf="item.status == 'unactivated'">冻结</nz-tag>
      </ng-template>
    </g2-card>
  </ng-template>
</nz-list>
